<script setup lang="ts">
  // import { useChatStore } from '@/store/chat'
  import sendMessage from "@/plugins/message.ts";
  import { ref } from 'vue'
  const fromRef = ref()
  function handleSendMessage(event) {
    if (event.key === 'Enter') {
      // 阻止默认行为，防止换行
      event.preventDefault()
      if (!fromRef.value.innerText) return false
      sendMessage(fromRef.value.innerText, () => {
        fromRef.value.innerText = ''
      })
    }
  }
  // 移动端输入
  function handleMobileInput() {
    // innerText.value = event.target.innerText
  }
  function updateInsetText(value) {
    fromRef.value.innerText += value
  }
  defineExpose({
    updateInsetText,
  })
</script>

<template>
  <div class="basis-full md:hidden block rounded-md min-h-[34px] bg-white mr-1">
    <div
      ref="fromRef"
      class="main-content dzm-textarea editText no-scrollbar"
      :contenteditable="true"
      :spellcheck="false"
      autocapitalize="off"
      autofocus
      placeholder="请输入需要咨询的问题"
      @keydown="handleSendMessage"
      @input="handleMobileInput"
    ></div>
  </div>
</template>

<style lang="less" scoped>
  .dzm-textarea {
    background: none;
    outline: none;
    padding: 0 10px;
    line-height: 34px;
    border-radius: 4px;
    max-height: 100px;
    font-size: 16px;
    overflow-y: scroll;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-user-modify: read-write-plaintext-only;
  }
  /* 输入框为空时显示 placeholder */
  .dzm-textarea:empty:before {
    content: attr(placeholder);
    color: #999;
  }
  /* 输入框获取焦点时移除 placeholder */
  .dzm-textarea:focus:before {
    // content: none;
    line-height: 18px;
  }
  [contenteditable]:focus {
    outline: none;
  }
</style>
